<template>
  <div class="fenbi-question-container">
    <!-- 顶部导航 -->
    <div class="question-header">
      <div class="header-left">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item @click="goBack">
            <el-icon><ArrowLeft /></el-icon> 我的题库
          </el-breadcrumb-item>
          <el-breadcrumb-item>错题本</el-breadcrumb-item>
          <el-breadcrumb-item>练习错题</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="header-right">
        <el-button type="text" @click="toggleCollect">
          <el-icon :size="20" :color="currentQuestion.isCollected ? '#F56C6C' : '#909399'">
            <StarFilled v-if="currentQuestion.isCollected" />
            <Star v-else />
          </el-icon>
          {{ currentQuestion.isCollected ? '已收藏' : '收藏' }}
        </el-button>
        <el-divider direction="vertical" />
        <el-button type="text" @click="showDeleteConfirm">
          <el-icon :size="20" color="#909399"><Delete /></el-icon>
          删除
        </el-button>
      </div>
    </div>

    <!-- 题目内容区域 -->
    <div class="question-content" v-if="questions.length > 0">
      <!-- 题目序号和类型 -->
      <div class="question-meta">
        <el-tag :type="questionType === 'DS01' ? 'primary' : 'success'" size="small">
          {{ questionType === 'DS01' ? '选择题' : '客观题' }}
        </el-tag>
        <span class="question-index">第{{ currentIndex + 1 }}题/共{{ questions.length }}题</span>
        <el-tag type="warning" size="small" v-if="currentQuestion.difficulty">
          难度: {{ getDifficultyText(currentQuestion.difficulty) }}
        </el-tag>
      </div>

      <!-- 题目正文 -->
      <div class="question-text" v-html="currentQuestion.questionContent"></div>


      <!-- 选择题选项 -->
      <div class="question-options" v-if="questionType === 'DS01'">
        <div class="option-list">
          <div
            v-for="option in currentQuestion.options"
            :key="option.value"
            :class="[
              'option-box',
              userAnswer === option.value ? (showAnalysis
                ? (isCorrect ? 'selected-correct' : 'selected-wrong')
                : 'selected') : '',
              showAnalysis && currentQuestion.correctAnswer === option.value ? 'correct-answer' : '',
              showAnalysis ? 'disabled' : ''
            ]"
            @click="!showAnalysis && selectOption(option.value)"
          >
            <span class="option-label">{{ option.label }}</span>
            <span class="option-content" v-html="option.text"></span>
          </div>
        </div>
      </div>

      <!-- 客观题作答区域 -->
      <div class="subjective-answer" v-else>
        <el-input
          type="textarea"
          :rows="4"
          v-model="userAnswer"
          placeholder="请输入您的答案"
          resize="none"
        />
      </div>

      <!-- 答案和解析区域 -->
      <div class="answer-analysis" v-if="showAnalysis">
        <div class="result-message" :class="isCorrect ? 'correct' : 'wrong'">
          <el-icon :color="isCorrect ? '#67C23A' : '#F56C6C'">
            <CircleCheckFilled v-if="isCorrect" />
            <CircleCloseFilled v-else />
          </el-icon>
          {{ isCorrect ? '回答正确' : '回答错误' }}
        </div>

        <div class="correct-answer">
          <span class="label">正确答案：</span>
          <span class="value" v-html="currentQuestion.correctAnswer"></span>
        </div>

        <div class="user-answer">
          <span class="label">您的答案：</span>
          <span class="value" v-html="userAnswer || '未作答'"></span>
        </div>

        <div class="analysis-section" v-if="currentQuestion.analysis">
          <div class="section-title">解析</div>
          <div class="section-content" v-html="currentQuestion.analysis"></div>
        </div>

        <div class="knowledge-section" v-if="currentQuestion.pointName">
          <div class="section-title">考点</div>
          <div class="section-content">{{ currentQuestion.pointName }}</div>
        </div>

        
        <div style="text-align:right;margin-top:10px;" v-if="isCorrect">
          <el-button type="danger" @click="showDeleteConfirm">
            <el-icon><Delete /></el-icon> 移除错题
          </el-button>
        </div>
      </div>

                <div class="notes-section" v-if="showAnalysis">
          <div class="section-title">我的笔记</div>
          <div class="notes-list" v-if="notes.length > 0">
            <div class="note-item" v-for="note in notes" :key="note.noteId">
              <div class="note-content" v-html="note.content"></div>
              <div class="note-meta">
                <span class="note-time">{{ formatNoteTime(note.updateTime) }}</span>
                <el-button type="text" @click="editNote(note)">编辑</el-button>
                <el-button type="text" @click="deleteNote(note.noteId)" style="color: #F56C6C;">删除</el-button>
              </div>
            </div>
          </div>
          <div v-else class="empty-notes">
            暂无笔记，点击下方添加笔记
          </div>
          
          <div class="note-editor">
            <el-input
              type="textarea"
              :rows="6"
              v-model="newNoteContent"
              placeholder="记录你的解题思路、易错点或知识点总结..."
              resize="none"
            />
            <div class="editor-actions">
              <el-button 
                type="primary" 
                size="small" 
                class="save-notes-btn" 
                @click="submitNote" 
                :loading="noteLoading"
              >
                {{ editingNote ? '更新笔记' : '保存笔记' }}
              </el-button>
              <el-button v-if="editingNote" @click="cancelEdit">取消编辑</el-button>
            </div>
          </div>
        </div>

      <!-- 底部操作按钮 -->
      <div class="question-actions">
        <el-button 
          type="primary" 
          plain 
          @click="prevQuestion" 
          :disabled="currentIndex === 0"
        >
          <el-icon><ArrowLeft /></el-icon> 上一题
        </el-button>
        <el-button 
          type="primary" 
          @click="nextQuestion" 
          :disabled="currentIndex === questions.length - 1"
        >
          下一题 <el-icon><ArrowRight /></el-icon>
        </el-button>
        <el-button 
          type="success" 
          @click="rePractice" 
          v-if="showAnalysis"
        >
          <el-icon><Refresh /></el-icon> 重新练习
        </el-button>
        <el-button
          type="primary"
          @click="checkAnswer"
          v-if="!showAnalysis"
        >
          <el-icon><CircleCheckFilled /></el-icon> 提交答案
        </el-button>
      </div>
    </div>

    <div v-else class="empty-tip">
      <el-empty description="暂无错题数据" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'
import { useUserStore } from '../../../store/UserStore'
import { ElMessage, ElMessageBox } from 'element-plus'
import { watch } from 'vue'
import { 
  Delete, 
  ArrowLeft, 
  ArrowRight, 
  Refresh,
  CircleCheckFilled,
  CircleCloseFilled,
  StarFilled,
  Star
} from '@element-plus/icons-vue'
const route = useRoute()
const router = useRouter()

// 获取用户ID
const userStore = useUserStore()
const userId = computed(() => userStore.userInfo?.userId)

// 题目数据
const questions = ref<any[]>([])
const currentIndex = ref(0)
const userAnswer = ref('')
const showAnalysis = ref(false)
const isCorrect = ref(false)
const questionType = ref('') // 题目类型：CS01或CS02

// 笔记相关
const notes = ref<any[]>([])
const newNoteContent = ref('')
const noteLoading = ref(false)
const editingNote = ref<any>(null)


// 当前题目
const currentQuestion = computed(() => {
  const question = questions.value[currentIndex.value] || {}
  // 根据题目内容识别题型
  if (question.answer) {
    // 解析 answer 字段，获取选项和正确答案
    try {
      const answerObj = typeof question.answer === 'string' ? JSON.parse(question.answer) : question.answer
      // 选项顺序：A、B、C、D
      const optionKeys = ['A', 'B', 'C', 'D']
      question.options = optionKeys.map(key => ({
        label: key,
        value: key,
        text: answerObj.options ? answerObj.options[key] : ''
      }))
      question.correctAnswer = answerObj.correct || ''
      questionType.value = 'DS01'
    } catch (e) {
      question.options = []
      question.correctAnswer = ''
      questionType.value = 'DS01'
    }
  } else {
    // 兼容原有逻辑
    if (question.questionContent) {
      questionType.value = question.questionContent.includes('DS01') ? 'DS01' : 'DS02'
    }
  }
  return question
})
// 选择题选项点击
const selectOption = (val: string) => {
  if (showAnalysis.value) return // 已提交后不可再选
  userAnswer.value = val
}

// 获取难度文本
const getDifficultyText = (level: number) => {
  const levels = ['简单', '中等', '困难', '极难']
  return levels[level - 1] || '未知'
}

// 初始化加载数据
onMounted(async () => {
  await loadQuestions()
})

// 加载题目数据
const loadQuestions = async () => {
  const ids = route.query.wrongQuestionIds
  const idArray = typeof ids === 'string' ? ids.split(',') : ids

  if (!idArray || idArray.length === 0) {
    ElMessage.error('缺少错题ID参数')
    return
  }
  
  try {
    const res = await axios.get('http://localhost:8080/wrongquestions/byids', {
      params: { ids: (idArray ?? []).join(',') }
    })
    console.log('错题接口返回数据:', res.data)
    
    // 获取用户ID
    const uid = userId.value
    if (!uid) {
      ElMessage.error('用户未登录，无法获取收藏状态')
      return
    }
    
    // 并行检查每道题是否已收藏
    const questionsWithCollectionStatus = await Promise.all(res.data.map(async (question: any) => {
      let correctAnswer = ''
      // 解析 answer 字段
      if (question.answer) {
        try {
          const answerObj = typeof question.answer === 'string' ? JSON.parse(question.answer) : question.answer
          correctAnswer = answerObj.correct || ''
        } catch (e) {
          correctAnswer = ''
        }
      }
      
      // 检查是否已收藏
      let isCollected = false
      try {
        const collectionRes = await axios.get('http://localhost:8080/favorites/exists', {
          params: { userId: uid, questionId: question.questionId }
        })
        isCollected = collectionRes.data
      } catch (error) {
        console.error('检查收藏状态失败:', error)
      }
      
      return {
        ...question,
        correctAnswer,
        analysis: question.analysis || question.explanation || '',
        pointName: question.pointName || question.point || '',
        isCollected
      }
    }))
    
    questions.value = questionsWithCollectionStatus
  } catch (error) {
    console.error('加载错题失败:', error)
    ElMessage.error('加载错题失败')
  }
}

// 检查答案（只判分和显示解析，不自动删除错题）
const checkAnswer = () => {
  if (!userAnswer.value) {
    ElMessage.warning('请先作答再提交')
    return
  }
  if (!currentQuestion.value.correctAnswer) {
    ElMessage.error('题目无标准答案，无法判分')
    return
  }
  showAnalysis.value = true
  isCorrect.value = questionType.value === 'DS01' 
    ? userAnswer.value === currentQuestion.value.correctAnswer
    : userAnswer.value.trim() === (currentQuestion.value.correctAnswer ? currentQuestion.value.correctAnswer.trim() : '')
  // 更新错题状态
  updateQuestionStatus()
}

// 更新错题状态
const updateQuestionStatus = async () => {
  try {
        await axios.post('http://localhost:8080/wrongquestions/updatemastered', {
      id: currentQuestion.value.id,
      isMastered: isCorrect.value ? 1 : 0
    })
    questions.value[currentIndex.value].isMastered = isCorrect.value ? 1 : 0
    ElMessage.success(isCorrect.value ? '恭喜你，答对了！' : '很遗憾，答错了')
  } catch (error) {
    console.error('更新错题状态失败:', error)
  }
}

// 切换题目
const prevQuestion = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--
    resetQuestionState()
  }
}

const nextQuestion = () => {
  if (currentIndex.value < questions.value.length - 1) {
    currentIndex.value++
    resetQuestionState()
  }
}

// 重新练习
const rePractice = () => {
  resetQuestionState()
}

// 重置题目状态
const resetQuestionState = () => {
  userAnswer.value = ''
  showAnalysis.value = false
  isCorrect.value = false
  newNoteContent.value = '' // 清空笔记输入框
  editingNote.value = null  // 重置编辑状态
}


// 在组件加载时加载笔记
onMounted(async () => {
  await loadQuestions()
  // 加载第一题的笔记
  if (questions.value.length > 0) {
    await loadNotes()
  }
})
// 编辑笔记

// 修改 loadNotes 方法
const loadNotes = async () => {
  if (!userId.value || !currentQuestion.value.questionId) return
  
  try {
    const res = await axios.get('http://localhost:8080/api/notes/practice', {
      params: { 
        userId: userId.value,
        questionId: currentQuestion.value.questionId
      }
    })
    notes.value = res.data.data || []
    // 如果已有笔记，预填充到编辑器
    if (notes.value.length > 0 && !editingNote.value) {
      newNoteContent.value = notes.value[0].content
    }
  } catch (error) {
    console.error('加载笔记失败:', error)
    notes.value = []
  }
}

// 修改 watch 监听
watch(currentQuestion, async (newVal, oldVal) => {
  if (newVal.questionId !== oldVal?.questionId) {
    await loadNotes()
  }
})

// 提交笔记
const submitNote = async () => {
  if (!newNoteContent.value.trim()) {
    ElMessage.warning('笔记内容不能为空')
    return
  }
  
  noteLoading.value = true
  try {
    const payload: {
      userId: any;
      questionId: any;
      content: string;
      noteId?: number;
    } = {
      userId: userId.value,
      questionId: currentQuestion.value.questionId,
      content: newNoteContent.value
    }
    if (editingNote.value) {
      payload.noteId = editingNote.value.noteId
    }
    
    const res = await axios.post('http://localhost:8080/api/notes/practice/save', payload)
    ElMessage.success(editingNote.value ? '笔记更新成功' : '笔记添加成功')
    newNoteContent.value = '' // 提交后清空输入框
    newNoteContent.value = ''
    editingNote.value = null
    await loadNotes()
  } catch (error) {
    console.error('保存笔记失败:', error)
    ElMessage.error('保存笔记失败')
  } finally {
    noteLoading.value = false
  }
}

const editNote = (note: any) => {
  editingNote.value = note
  newNoteContent.value = note.content
}


const cancelEdit = () => {
  editingNote.value = null
  newNoteContent.value = ''
}

const formatNoteTime = (time: string) => {
  return new Date(time).toLocaleString()
}


// 收藏/取消收藏
const toggleCollect = async () => {
  const q = currentQuestion.value
  const uid = userId.value
  const questionId = q.questionId // 错题接口返回的原题id
  if (!uid || !questionId) {
    ElMessage.error('缺少用户ID或题目ID，无法操作收藏')
    return
  }
  
  try {
    // 先检查是否已收藏
    const isCollected = await axios.get('http://localhost:8080/favorites/exists', {
      params: { userId: uid, questionId: questionId }
    })
    
    if (!isCollected.data) {
      // 添加收藏
      await axios.post('http://localhost:8080/favorites/add', {
        userId: uid,
        questionId: questionId
      })
      questions.value[currentIndex.value].isCollected = true
      ElMessage.success('已收藏题目')
    } else {
      // 取消收藏
      await axios.get('http://localhost:8080/favorites/deletebyuq', {
        params: { userId: uid, questionId: questionId }
      })
      questions.value[currentIndex.value].isCollected = false
      ElMessage.success('已取消收藏')
    }
  } catch (error) {
    ElMessage.error('收藏操作失败')
    console.error('收藏操作失败:', error)
  }
}

// 删除错题
const showDeleteConfirm = () => {
  ElMessageBox.confirm(
    '确定要删除这道错题吗？删除后将无法恢复',
    '删除确认',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      await axios.get('http://localhost:8080/wrongquestions/softdelete', { params: { id: currentQuestion.value.id } })
      questions.value.splice(currentIndex.value, 1)
      if (questions.value.length === 0) {
        goBack()
      } else if (currentIndex.value >= questions.value.length) {
        currentIndex.value = questions.value.length - 1
      }
      ElMessage.success('错题已删除')
      resetQuestionState()
    } catch (error) {
      ElMessage.error('删除错题失败')
      console.error('删除错题失败:', error)
    }
  }).catch(() => {})
}

// 格式化时间方法 - 适用于笔记和其他时间显示
const formatDateTime = (timeStr: string) => {
  if (!timeStr) return ''
  try {
    const date = new Date(timeStr)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  } catch {
    return timeStr
  }
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

//删除笔记
const deleteNote = async (noteId: number) => {
  try {
    await ElMessageBox.confirm('确定要删除这条笔记吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await axios.delete(`http://localhost:8080/api/notes/delete/${noteId}`, {
      params: { userId: userId.value }
    })
    
    ElMessage.success('笔记删除成功')
    await loadNotes()
    newNoteContent.value = ''
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除笔记失败:', error)
      ElMessage.error('删除笔记失败')
    }
  }
}

</script>
<style scoped lang="scss">
.option-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 30px;
}
.option-box {
  display: flex;
  align-items: center;
  padding: 18px 22px;
  border-radius: 10px;
  border: 2px solid #ebeef5;
  background: #fff;
  cursor: pointer;
  font-size: 17px;
  margin-bottom: 0;
  transition: all 0.18s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  user-select: none;
  position: relative;
  min-height: 48px;
}
.option-box:not(.disabled):hover {
  border-color: #409EFF;
  background: #f5faff;
  box-shadow: 0 4px 16px rgba(64,158,255,0.08);
}
.option-box.selected {
  border-color: #409EFF;
  background: #e6f7ff;
  box-shadow: 0 0 0 2px #409EFF22;
}
.option-box.selected-correct {
  border-color: #67C23A;
  background: #f0f9eb;
  box-shadow: 0 0 0 2px #67C23A33;
}
.option-box.selected-wrong {
  border-color: #F56C6C;
  background: #fef0f0;
  box-shadow: 0 0 0 2px #F56C6C33;
}
.option-box.correct-answer {
  border-color: #67C23A;
  background: #f0f9eb;
  box-shadow: 0 0 0 2px #67C23A33;
}
.option-box.disabled {
  cursor: not-allowed;
  opacity: 0.85;
  pointer-events: none;
}
.option-label {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-weight: bold;
  font-size: 19px;
  color: #409EFF;
  background: #e6f7ff;
  border-radius: 50%;
  margin-right: 20px;
  box-shadow: 0 1px 4px #e6f7ff99;
  flex-shrink: 0;
}
.option-box.selected .option-label {
  background: #409EFF;
  color: #fff;
}
.option-box.selected-correct .option-label,
.option-box.correct-answer .option-label {
  background: #67C23A;
  color: #fff;
}
.option-box.selected-wrong .option-label {
  background: #F56C6C;
  color: #fff;
}
.option-content {
  flex: 1;
  color: #303133;
  font-size: 17px;
  word-break: break-all;
}

.fenbi-question-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 18px 22px 18px;
  background: linear-gradient(120deg, #f6fbff 0%, #e3f0ff 100%);
  border-radius: 32px;
  box-shadow: 0 8px 32px 0 rgba(99, 143, 255, 0.12);
}


.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid #fafafa;
  margin-bottom: 24px;
  .header-left {
    .el-breadcrumb-item {
      cursor: pointer;
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    .el-button {
      padding: 0 12px;
      margin-left: 10px;
      border-radius: 18px;
      font-size: 14px;
      background: linear-gradient(90deg, #4ea1e9);
      color: #5b80e6;
      border: none;
      box-shadow: 0 2px 8px 0 rgba(224, 108, 159, 0.10);
      transition: background 0.2s, color 0.2s, transform 0.2s;
      &:hover {
        background: linear-gradient(90deg, #e3f0ff 0%, #bdecf9 100%);
        color: #6cb1e0;
        transform: scale(1.08) rotate(-2deg);
      }
    }
  }
}

.question-meta {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 15px;
  .question-index {
    color: #606266;
    font-size: 14px;
  }
}

.question-text {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 25px;
  color: #303133;
}

.question-options {
  margin-bottom: 30px;

  .option-item {
    display: block;
    margin-bottom: 15px;
    padding: 10px 15px;
    border-radius: 4px;
    transition: all 0.3s;
    border: 1px solid #dce5f9;

    &:hover {
      background-color: #8db5f0;
    }

    .option-label {
      font-weight: bold;
      margin-right: 10px;
    }
  }

  :deep(.el-radio__input) {
    display: none;
  }

  :deep(.el-radio__label) {
    padding-left: 0;
  }
}

.subjective-answer {
  margin-bottom: 30px;
}

.answer-analysis {
  margin-top: 32px;
  padding: 24px;
  background: linear-gradient(90deg, #fff 60%, #e3f0ff 100%);
  border-radius: 22px;
  box-shadow: 0 4px 16px 0 rgba(99, 143, 255, 0.10);
  .result-message {
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 18px;
    .el-icon {
      margin-right: 8px;
      font-size: 20px;
    }
    &.correct {
      color: #3ac25a;
    }
    &.wrong {
      color: #f97c7c;
    }
  }
  .correct-answer,
  .user-answer {
    margin-bottom: 15px;
    font-size: 15px;
    .label {
      color: #606266;
      font-weight: bold;
    }
    .value {
      color: #303133;
    }
  }
  .section-title {
    font-weight: bold;
    color: #606266;
    margin: 15px 0 8px 0;
    padding-bottom: 5px;
    border-bottom: 1px dashed #e4e7ed;
  }
  .section-content {
    color: #303133;
    line-height: 1.7;
  }
}

.question-actions {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  gap: 20px;
  .el-button {
    border-radius: 18px;
    font-size: 15px;
    min-width: 90px;
    height: 40px;
    background: linear-gradient(90deg, #f6f8f8 0%, #d9e9fb 100%);
    color: #1d65bd;
    border: none;
    box-shadow: 0 2px 8px 0 rgba(224, 108, 159, 0.10);
    transition: background 0.2s, color 0.2s, transform 0.2s;
    &:hover {
      background: linear-gradient(90deg, #e3f0ff 0%, #e4e1e3 100%);
      color: #ccd3d8;
      transform: scale(1.08) rotate(-2deg);
    }
  }
}

.empty-tip {
  padding: 50px 0;
  text-align: center;
}

@media (max-width: 768px) {
  .fenbi-question-container {
    padding: 15px;
  }

  .question-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    .header-right {
      width: 100%;
      justify-content: flex-end;
    }
  }

  .question-actions {
    flex-wrap: wrap;
    
    .el-button {
      flex: 1;
      min-width: 120px;
    }
  }
}

// UI增强样式
// 请将下面的样式代码移动到 <style scoped lang="scss"> 内：
.option-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 30px;
}
.option-box {
  display: flex;
  align-items: center;
  padding: 18px 22px;
  border-radius: 10px;
  border: 2px solid #ebeef5;
  background: #fff;
  cursor: pointer;
  font-size: 17px;
  margin-bottom: 0;
  transition: all 0.18s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  user-select: none;
  position: relative;
  min-height: 48px;
}
.option-box:not(.disabled):hover {
  border-color: #3d8ad7;
  background: #f5faff;
  box-shadow: 0 4px 16px rgba(64,158,255,0.08);
}
.option-box.selected {
  border-color: #388de1;
  background: #e6f7ff;
  box-shadow: 0 0 0 2px #409EFF22;
}
.option-box.selected-correct {
  border-color: #CAEBE2;
  background: #f0f9eb;
  box-shadow: 0 0 0 2px #67C23A33;
}
.option-box.selected-wrong {
  border-color: #eb8668;
  background: #fef0f0;
  box-shadow: 0 0 0 2px #F56C6C33;
}
.option-box.correct-answer {
  border-color: #CAEBE2;
  background: #f0f9eb;
  box-shadow: 0 0 0 2px #67C23A33;
}
.option-box.disabled {
  cursor: not-allowed;
  opacity: 0.85;
  pointer-events: none;
}
.option-label {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-weight: bold;
  font-size: 19px;
  color: #409EFF;
  background: #e6f7ff;
  border-radius: 50%;
  margin-right: 20px;
  box-shadow: 0 1px 4px #e6f7ff99;
  flex-shrink: 0;
}
.option-box.selected .option-label {
  background: #409EFF;
  color: #fff;
}
.option-box.selected-correct .option-label,
.option-box.correct-answer .option-label {
  background: #67C23A;
  color: #fff;
}
.option-box.selected-wrong .option-label {
  background: #F56C6C;
  color: #fff;
}
.option-content {
  flex: 1;
  color: #303133;
  font-size: 17px;
  word-break: break-all;
}
.notes-section {
  margin-top: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebeef5;
  }

  .empty-notes {
    color: #909399;
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
  }

  .note-item {
    padding: 15px;
    margin-bottom: 15px;
    background: #f8f9fa;
    border-radius: 8px;

    .note-content {
      line-height: 1.6;
      color: #303133;
      margin-bottom: 10px;
    }

    .note-meta {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #909399;

      .note-time {
        margin-right: 15px;
      }

      .el-button {
        padding: 0;
        margin-left: 10px;
      }
    }
  }

  .note-editor {
    margin-top: 20px;

    .editor-actions {
      margin-top: 15px;
      text-align: right;
    }
    .el-input__inner, .el-textarea__inner {
      background: #f6f8fa;
      border-radius: 8px;
      border: 1px solid #dce5f9;
      font-size: 15px;
      color: #303133;
      padding: 10px 12px;
      transition: border-color 0.2s;
    }
    .el-input__inner:focus, .el-textarea__inner:focus {
      border-color: #4a90e2;
      background: #eaf4ff;
    }
    .save-notes-btn {
      background: #4a90e2;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 8px 16px;
      font-size: 14px;
      margin-left: 10px;
      transition: background 0.2s;
    }
    .save-notes-btn:hover {
      background: #3a7bc8;
    }
  }
}

.practice-btn, .save-notes-btn {
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  height: 36px;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
  }
  
  &:active {
    transform: translateY(0);
  }
  
  .el-icon {
    margin-right: 6px;
    font-size: 16px;
  }
}

/* 主按钮样式 */
.el-button--primary {
  background: #4a90e2;
  color: white;
  border: none;
  
  &:hover {
    background: #3a7bc8;
    color: white;
  }
}

/* 成功按钮样式 */
.el-button--success {
  background: #48a6bb;
  color: white;
  border: none;
  
  &:hover {
    background: #38a19c;
    color: white;
  }
}

/* 信息按钮样式 */
.el-button--info {
  background: #718096;
  color: white;
  border: none;
  
  &:hover {
    background: #5a6c80;
    color: white;
  }
}

/* 确保所有按钮都有相同的圆角和过渡效果 */
.el-button {
  border-radius: 8px;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
  }
  
  &:active {
    transform: translateY(0);
  }
}
</style>


